<template>

  <div>
    <el-dialog :visible.sync="show" :title="{add:'新增权限节点',bian:'编辑权限节点'}[mode]" @close="qux">
      {{ form }}

      <el-form ref="form" label-width="120px" :model="form" :rules="rules">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="form.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: center;">
          <el-button type="primary" @click="cq">确认</el-button>
          <el-button @click="qux">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { syspermissionadd, syspermissionidbianji } from '@/api/quanxian'
export default {

  data() {
    return {
      mode: 'add',
      show: false,
      form: {
        enVisible: false,	// string	非必须  得出规律，0 或 1
        name: '',	// string	非必须
        code: '',	// string	非必须
        description: '',	// string	非必须
        type: '',	// number	非必须         在外层 是 1 第二层是 2
        pid: '' //                        外层 "0"  子集是 父级pid
      },
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        code: [
          { required: true, message: '不能为空', trigger: 'change' }

        ],
        description: [
          { required: true, message: '不能为空', trigger: 'change' }

        ]

      }
    }
  },
  methods: {

    async cq() {
      await this.$refs.form.validate()

      if (this.mode === 'add') {
        await syspermissionadd(this.form)
      } else {
        await syspermissionidbianji(this.form)
      }

      this.show = false

      this.$emit('getData')
      this.$message.success('成功')
    },
    qux() {
      this.show = false
      this.$refs.form.resetFields()
      this.form = {
        enVisible: '',	// string	非必须
        name: '',	// string	非必须
        code: '',	// string	非必须
        description: '',	// string	非必须
        type: '',	// number	非必须
        pid: ''
      }
    }

  }

}
</script>

<style>

</style>
